<template>
	<view class="contailer">
		<uniNavBar name="阅读详情" nextFlag="true" rightText="search" bac="black"></uniNavBar>
	
		<view class="name">
			{{titles}}
		</view>
		<view class="details-flex">
			<view>
				
				{{author}}
			</view>
			<!-- <view>
				05-20 14:33
			</view> -->
		</view>
		
		<view class="details">
			<image :src="src"></image>
			<view>
				<rich-text :nodes="html"></rich-text>
			</view>
		</view>
		
		<view class="stydy-flex">
			<text>完成学习</text>
			<text>
				{{done_count}}人
			</text>
			<text>积分 +{{done_point}}</text>
		</view>
	</view>
</template>

<script>
	import {activityList,post} from '@/utils/interface.js'
	export default{
		data(){
			return {
				titles:"",
				author:"",
				src:"",
				html:"",
				done_count:"",
				done_point:""
			}
		},
		methods:{
			// 获取文章详情
			details(id){
				activityList({method:"activities.task_read_detail",read_id:id,token:uni.getStorageSync('userToken')}).then(res=>{
					console.log(res.data)
					this.titles = res.data.title
					this.author = res.data.author
					this.src = res.data.cover
					this.html = res.data.content
					this.done_count = res.data.done_count
					this.done_point = res.data.done_point
					this.read_id = res.data.id
					this.setStateRead()
				})
			},
			// 阅读完成状态设置
			setStateRead(){
				post({method:"activities.task_read_done",read_id:this.read_id,token:uni.getStorageSync('userToken')}).then(res=>{
					console.log(res.data)
				})
			}
		},
		onPullDownRefresh() {
			console.log("触底")
		},
		onReachBottom() {
			console.log("触底2")
		},
		onLoad(options){
			this.details(options.id)
			
		}
	}
</script>

<style>
	.name{
		color:#222222;
		font-size: 36upx;
		line-height: 100upx;
	}
	.contailer{
		padding: 20upx;
		padding-top: 88upx;
	}
	.details-flex{
		display: flex;
		align-items: center;
	}
	.details-flex view:nth-of-type(1){
		color: #8B82B3;
		flex:1;
		font-size: 26upx;
	}
	.details-flex view:nth-of-type(2){
		color: #999;
		font-size: 26upx;
		line-height:100upx
	}
	.details{
		line-height: 50upx;
		font-size: 28upx;
	}
	.details image{
		height: 320upx;
		background: #dddddd;
		width: 100%;
	}
	.stydy-flex{
		display: flex;
		font-size: 24upx;
		color: #959595;
		justify-content: flex-end;
		margin-top: 112upx;
	}
	.stydy-flex text{
		margin-right: 20upx;
	}
</style>
